
<style lang="less">
	.itempre{
		height:100%;overflow-y:hidden;position:relative;
		padding-tOP:44px;
		box-sizing: border-box;
		.searchbox{
			position:absolute;left:0;top:0;width:100%;
		}
	}
  .shopBanner{
    height:200px!important;
  }
  .shopBanner img{
    width:100%!important;
    height:100%!important;
  }
</style>
<template>
	<div class="itempre">
		<van-search
			class="searchbox"
			v-model="form.kewords"
			placeholder="请输入搜索关键词"
			show-action
			@search="searchFn(true)">
			<div slot="action" @click="searchFn(true)">搜索</div>
		</van-search>
		 <!--<div v-loadmore="loaditem" ref="scollbox" class="scollbox">-->
        <!--<loadmore v-model="isloadmore" @onscroll="onscroll">-->
          <van-swipe :autoplay="3000" class="shopBanner">
            <van-swipe-item v-for="(b,k) in banner" :key="k+b.url" @click="backimg(b.url)">
              <img :src="$http.IMGURL+b.image"  />
            </van-swipe-item>
          </van-swipe>
          <div class="goodsitem_box">
            <van-list
              v-model="loading"
              :finished="finished"
              @load="initdata"
            >

              <!--没有数据-->
              <div class="no-cart" v-if="typeof data == 'string'" style="color:#ccc;padding:20px 0;">
                <span>{{data}}</span>
              </div>

            <el-row :gutter="2">
              <el-col :xs="12" :sm="8" v-for="item in data" :key="item.id">
                <div class="goodsitem" @click="info(item)">
                  <div class="img">
                    <img v-if="item.item.images != ''" :src="$http.IMGURL+item.item.images" />
                    <img v-else src="http://res2.esf.leju.com/esf_www/statics/images/default-img/detail.png"/>
                  </div>
                  <div class="text">
                    <p class="title">{{item.item.title}}</p>
                    <div class="attrs">
                      <div class="price">￥<span>{{item.item.price}}</span></div>
                    </div>
                    <!-- <p class="comment">
                      <span>1条评价</span><span>90%好评</span>
                    </p> -->
                  </div>
                </div>
              </el-col>
            </el-row>
              <p v-show="block" style="color:#ccc;text-align: center;padding:10px 0;">商品已加载完毕！</p>
            </van-list>
          </div>
        <!--</loadmore>-->
     <!--</div>-->
	</div>
</template>

<script>
import { mapState } from 'vuex';
import loadmore from '@/components/loadmore';
export default {
	name: "home",
	components : {
		loadmore
	},
	data () {
		return {
			data : [],
			loading : false,
      finished: false,
      block:false,
			form : {
				page : 1,
				pagesize : 10,
				kewords : ''
			},
			isloadmore : true
		}
	},
	computed: {
		banner (){
			if(this.$store.state.shop.shopsetting.shop.banner){
				return Object.values(this.$store.state.shop.shopsetting.shop.banner)
			}
			return [];
		}
	},
	methods:{
		//跳转到详情
		info(item){
			this.$router.push({
				name: "shop_goodsinfo",
				params:{
					storeid : item.store_id,
					itemid : item.item_id,
					goodsid : item.item.goods_id
				}
			});
		},
    searchFn(){
		  var that = this
      this.$router.push({
        name: "shop_goodslist",
        params:{
          kaywords : that.form.kewords
        }
      });
    },
		initdata(){
			// this.form.page = 1;
			this.loading = true;
			this.$http.item.get('stock/search',{
				params : this.form
			}).then(res => {
				if(!res.data.code){
          // console.log(res.data.data.list.data)
          this.form.page = res.data.data.list.current_page+1;
					// this.data = [...res.data.data.list.data]
          for(var i =0;i<res.data.data.list.data.length;i++){
            // res.data.data.list.data[i].item.price = (parseFloat(res.data.data.list.data[i].item.price)*(discount/10)).toFixed(2);

            this.data.push(res.data.data.list.data[i]);
          }

					// if(res.data.data.list.data.length < this.form.pagesize){
					// 	this.isloadmore = false;
					// }
          this.loading = false;
          if(!this.data.length){
            this.finished = true;
            this.data = '暂无相关商品！';
          }else if (this.data.length >= res.data.data.list.total) {
            this.finished = true;
            this.block = true
          }
          // console.log(this.data)
				}else{
				  // console.log(res.data)
					this.$message.error(res.data.messge)
				}
				this.loading = false;
			})
		},
		onscroll(){
            this.form.page ++;
            this.$http.item.get('stock/search',{
                params : this.form
            }).then(res => {
                if(!res.data.code){
                    this.data.push(...res.data.data.data)
                    if(res.data.data.data.length < this.form.pagesize){
                        this.isloadmore = false;
                    }
                }else{
                    this.$message.error(res.data.messge)
                }
            })
		},
		backimg(url){
      // console.log(11)
      window.location.href=url
		}
	},
	mounted(){
    this.$toast.loading({
      mask: true,
      message: '加载中...',
      duration: 2000
    });
		this.initdata();
	},
	created(){

	}
}
</script>

